<template>
  <prism-editor
   class="my-editor height-400"
    v-model="code"
    aria-disabled
    :highlight="highlighter"
    line-numbers
    :readonly="true"
    :tabSize="4"
    ></prism-editor>
</template>

<script>
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css"; 

export default {
    props:["code"],
    components:{
        PrismEditor
    },
    data:function(){
        return {
            
        }
    },
    methods:{
        highlighter(code){
            return highlight(code,languages.js);
        }
    }
}
</script>

<style lang="scss">
	.my-editor {
	 background: #2d2d2d;
	 color: #ccc;
	 font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
	 font-size: 14px;
	 line-height: 1.5;
	 padding: 5px;
	}
	
	.prism-editor__textarea:focus {
	 outline: none;
	}
	
	/* 非必须 */
	.height-400 {
	 	height: 400px;
	}
</style>